/*
 * Copyright (C) 2014 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

// PUTTING STUFF IN THIS FILE IS CONSIDERED BAD!
// you should put it in its own css file named after
// the React Component you're using it in.

$ef-thumbnail-size: 36px;


@mixin hideForPhone {
  @media (max-width:800px){
    display: none;
  }
}

body.files {
  .ic-Layout-contentMain { padding-top: 0; }
  .ic-app-nav-toggle-and-crumbs {
    /* display: none; */
    &.ic-app-nav-toggle-and-crumbs--files { display: flex; }
  }
}

.ic-app-nav-toggle-and-crumbs.ic-app-nav-toggle-and-crumbs--files {
  margin-left: 0; margin-right: 0;
}

// hides the course menu hamburger in the personal files breadcrumb
body:not(.with-left-side) .ic-app-nav-toggle-and-crumbs--files {
  > .ic-app-course-nav-toggle {
    display: none;
  }
}

.ef-main-buttons {
  .ui-buttonset, .ui-button {
    display: inline-block;
  }
}

.ef-header {
  padding: $ic-sp*2 0 $ic-sp;
  border-bottom: 1px solid $ic-border-light;
  @include breakpoint(desktop) {
    display: flex;
    align-items: center;
  }
  .ui-buttonset {
    margin: 0;
  }
  & .ui-button:first-child {
    border-top-left-radius: $borderRadius;
    border-bottom-left-radius: $borderRadius;
  }
  & .ui-button:last-child {
    border-top-right-radius: $borderRadius;
    border-bottom-right-radius: $borderRadius;
  }
}

.ef-search-form {
  margin-bottom: $ic-sp/2;
  @include breakpoint(desktop) {
    margin-bottom: 0;
    flex: 0 0 $ic-sp*31;
    &.ef-search-form--showing-buttons {
      flex: 0 0 $ic-sp*19;
    }
  }
}

.ef-selected-count {
  @include fontSize($ic-font-size--xsmall);
  font-style: italic;
  white-space: nowrap;
  padding-left: $ic-sp;
}

.ef-header__secondary {
  display: flex;
  align-items: center;
  @include breakpoint(desktop) {
    flex: 1;
    margin-left: $ic-sp;
  }
}

.ef-actions {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  > * { margin-left: $ic-sp/3; }
}

.ef-main{
  min-height: 300px;
  display: flex;

  .ef-folder-content{
    display: flex;
    flex-direction: column;
    flex: 1 1 0%;
    padding: 0px;
    border-right: 1px solid $ic-border-light;
    overflow-x: auto;

    .tree {
      margin: 10px;
      @include fontSize($ic-font-size);
      li {
        a {
          display: flex;
          align-items: center; // so icons et all, align vertically
          padding: 2px;
          i {
            flex: 0 0 auto;
          }
          span {
            flex: 1 1 auto;
          }
        }
      }
    }

    [aria-selected=true] > .ef-folder-header{
      background-color: #f2f2f2;
      font-weight: bold;
    }

    .ef-folder-header{
      padding-top: $ic-sp/3;
      padding-bottom: $ic-sp/3;

      &:hover{
        background-color: #f2f2f2;
      }
    }

    .ef-folder-list{
      flex: 10 10 0;
      @include fontSize($ic-font-size--xsmall);
      overflow: auto;
    }

    .ef-folder-totals{
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex: 1 1 0;
      height: 30px;
      @include fontSize($ic-font-size--medium);
      border-top: 1px solid $ic-border-color;
      padding-left: 20px;
    }
  }
}
.ef-directory{
  position: relative;
  margin: 10px;
  flex: 3;
  // long file names cause this container, of all things, to expand unreasonably even after they get elided. Work
  // around that for the moment with this.
  display: flex;
  flex-direction: column;

  @include breakpoint(desktop) {
    max-width: 75%;
  }
}
.ef-directory-header{
  display: flex;
  align-items: center;
  border-bottom: 1px solid $ic-border-light;
  padding: $ic-sp/3;
}

.ef-plain-link, .ef-plain-link:hover { color: $ic-font-color-dark; }

.ef-item-row {
  display: flex;
  align-items: center;
  padding: 4px;
  user-select: none; /* so that we can shift-click to select */
  margin-bottom: 1px;
  box-sizing: border-box;
  @if $use_high_contrast { border: 1px solid transparent; }

  // :hover style needs to be before 'selected' so item that is both hovered and selected gets selected color
  &:hover {
    @if $use_high_contrast {
      border-color: $ic-color-dark;
      border-style: dotted;
    }
    @else { background-color: $ic-bg-light-primary; }
  }
  &.ef-item-selected {
    background-color: $ic-bg-light-primary;
    position: relative;
    &::before {
      // adds blue border
      content: '';
      position: absolute;
      left: 0;
      top:0;
      width: 4px;
      height: 100%;
      background: $ic-brand-primary;
    }
  }

  .al-trigger { opacity: 0 }

  &:hover .al-trigger,
   .al-trigger.ui-state-active,
   .al-trigger:focus {
    opacity: 1
  }

  .btn-link {
    border-width: 0;
    padding-right: 15px;
    &.restricted { color: $ic-color-alert; }
    &.hiddenState { color: $ic-color-alert; }
  }
}

.ef-big-icon-container {
  margin-right: $ic-sp/2;
  flex: 0 0 $ef-thumbnail-size;
}

.ef-big-icon {
  width: $ef-thumbnail-size !important;
  color: $ic-font-color-dark;
  &:before {
    font-size: $ef-thumbnail-size - 7px !important;
  }
}

.ef-hidden-flex {
  flex: 0 0 0;
  visibility: hidden;
  height: 0; width: 0;
  overflow: hidden;
}

.ef-name-col{
  flex: 8;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-right: $ic-sp/2;
  box-sizing: border-box;
  a {
    @if $use_high_contrast { @extend .ef-plain-link; }
  }
}

.ef-name-col__link, .ef-name-col__click-wrapper {
  display: flex;
  align-items: center;
  overflow: hidden;
}

.ef-name-col__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.ef-date-created-col{
  flex: 3;
  @include hideForPhone;
}

.ef-date-modified-col{
  flex: 3;
  @include hideForPhone;
}

.ef-modified-by-col{
  flex: 3;
  @include hideForPhone;
}

.ef-size-col{
  flex: 2;
  @include hideForPhone;
}

.ef-usage-rights-col {
  flex: 1
}

.ef-name-col,
.ef-date-created-col,
.ef-date-modified-col,
.ef-modified-by-col,
.ef-size-col {
  @include fontSize(13px);

  &[role="columnheader"] {
    font-weight: $ic-font-weight;
  }
}

/* used to make sure the icons align nicely */
.ef-usage-rights-col-offset {
  margin-left: 5px;
}

.ef-links-col{
  display: flex;
  flex: 2 0 63px;
  justify-content: flex-end;
}

.ef-thumbnail {
  width: $ef-thumbnail-size;
  height: $ef-thumbnail-size;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2);
}

.ef-edit-name-form {
  position: relative;
  margin: 0 $ic-sp/3;
  flex: 1;
}

.ef-edit-name-form__button {
  padding-left: $ic-sp/2;
  padding-right: $ic-sp/2;
}

.ef-footer {
  border-top: 1px solid $ic-border-color;
  padding: 0 $ic-content-padding;
  line-height: 33px;
  .ef-quota-usage {
    min-width: 330px;
  }
}

.file-rename-form__form-label {
  float: left;
  margin-top: 5px;
  padding-right: 5px;
}

.current_uploads {
  border-radius: 10px;
  border: dashed $ic-color-neutral 2px;
  padding: 10px 10px 10px 10px;
}

.ef-breadcrumb-popover {
  display: block;
  left: -9999px;
  top: 15px;
  opacity: 0;
  transition: opacity .2s;
  width: auto;
  &.open {
    left: -23px;
    opacity: 1;
  }
  &.popover > .arrow {
    left: 53px;
  }

  ul {
    list-style: none;
    margin: 0;
  }
}

.activeDragTarget {
  background-color: $ic-list-item-background--selected !important;
  box-shadow: inset 0 0 0px 2px $ic-brand-primary;
}

.DragFeedback {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;

  > * {
    position: absolute;
  }
}

.form-controls {
  .btn {
    margin: 0 0 0 5px;
  }
}

// Putting this here because it's used in two components...
.ShowFolder__accessbilityMessage, .SearchResults__accessbilityMessage {
  @include accessibility-prompt($is-link: false);
  // We need to override these to effetively hide it until it is given focus.
  height: 0;
  padding: 0;
  border: 0;
  margin: 0;
  overflow: hidden;

  &:focus {
    // We'll bring back in all the defaults on focus as well as bring the height back
    @include accessibility-prompt($is-link: false);
    height: auto;
  }
}

// the lock
.ef-main {
  .lock-icon {  // align it with the adjacent buttons
    margin-right: $ic-sp/2;
    padding-top: $ic-sp/2;
    &.lock-icon button.unlocked {
      color:  $ic-color-icon-disabled;
    }
    &.lock-icon button.locked {
      color: $ic-brand-primary;
    }
  }
}
